<template>
  <div class="main-container">
    <div class="sidebar">
      <ul v-for="item in routes" :key="item">
        <li
          v-for="(ele, index) in item.children"
          :key="ele"
          :class="{ active: mIndex == index }"
          @click="goPath(ele, index)"
        >
          {{ ele.name }}
        </li>
      </ul>
    </div>
    <main class="app-main">
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup>
import { computed, ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const mIndex = ref(sessionStorage.getItem("mIndex") || "0");

const routes = computed(() => router.options.routes);
console.log(routes);
const goPath = (ele, index) => {
  mIndex.value = index;
  router.push({
    path: ele.path,
  });
  sessionStorage.setItem("mIndex", index);
};
</script>

<style lang="less" scoped>
.main-container {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .sidebar {
    width: 200px;
    height: 100%;
    border-right: 1px solid #eee;
    text-align: center;
    ul {
      li {
        height: 50px;
        line-height: 50px;
        cursor: pointer;
      }
      .active {
        color: #409eff;
        background-color: #ecf5ff;
        border-right: 1px solid #409eff;
      }
    }
  }
  .app-main {
    flex: 1;
    padding: 20px 50px;
    overflow-y: auto;
  }
}
</style>
